<template>
  <dv-border-box-13 class="pie">

      <div class="title"  >
        <img src="../../assets/img/titles/zuo.png" alt="">
                用户预览
        <img src="../../assets/img/titles/you.png" alt="">
      </div>
      <div class="body" >
        <div class="com-pie" ref="pie_ref" style="text-align: center;">
       
      </div>
      </div>

  
  </dv-border-box-13>

</template>

<script>
import { listDevice } from "../../api/system/device";
export default {
    name: "xs-pie",
    data() {
        return {
            chartInstance: null,
        };
    },
    mounted() {
        this.initChart();
        this.getData();
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.pie_ref);
        },
        async getData() {
            try {
                const data = await listDevice({ status: "3" });
                  (data.rows)
                this.stateList(data.rows);
            } catch (error) {
                  (error);
            }
        },

        stateList(e) {
            let offlineCount = 0;
            let normalCount = 0;
            let dangerCount = 0;

            e.forEach((item) => {
                const statusLabel = item.statusLable;
                if (statusLabel === "离线") {
                    offlineCount++;
                } else if (statusLabel === "在线") {
                    normalCount++;
                }
            });


     
            this.updateChart(offlineCount, normalCount);
        },
        updateChart(offlineCount, normalCount) {
      let total =offlineCount+normalCount;
      let colors = ["#ECA444", "#33A1DB", "#56B557"];
      let piedata = {
        type: "pie",
        radius: ["42%", "60%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 2,
        },

        color: colors,
        data: [
          // {
          //   value: 0,
          //   name: "告警",
          //   label: {
          //     shadowColor: colors[0],
          //   },
          // },

          {
            value:  normalCount,
            name: "在线",
            label: {
              shadowColor: colors[2],
            },
          },
          {
            value:offlineCount,
            name: "离线",
            label: {
              shadowColor: colors[1],
            },
          },


        ],
      };
      const options = {
        title: {
          // zlevel: 0,
          text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              value: {
                color: "#ffffff",
                fontSize: 24,
                fontWeight: "bold",
                lineHeight: 15,
              },
              name: {
                color: "#ffffff",
                lineHeight: 15,
              },
            },
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        legend: {
          show: false,
          top: "5%",
          left: "center",
        },
        series: [
          //展示圆点
          {
            ...piedata,
            tooltip: { show: true },
            label: {
              formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
              //   position: "outside",
              rich: {
                b: {
                  color: "#fff",
                  fontSize: 12,
                  lineHeight: 26,
                },
                c: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
                per: {
                  color: "#31ABE3",
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              length: 15, // 第一段线 长度
              length2: 15, // 第二段线 长度
              show: true,
            
            },
              emphasis: {
                show: true,
              },
          },
          {
            ...piedata,
            tooltip: { show: true },
            itemStyle: {},
            label: {
              backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
              height: 0,
              width: 0,
              lineHeight: 0,
              borderRadius: 2.5,
              shadowBlur: 8,
              shadowColor: "auto",
              padding: [],
            },
            labelLine: {
              length: 15, // 第一段线 长度
              length2: 15, // 第二段线 长度
              show: false,
            },
          },
        ],
      };

            this.chartInstance.setOption(options);
  
        },


    },
}
</script>

<style scoped>
.pie {
    width: 100%;
    height: 100%;
    position: relative;
  
    background-size: cover;
 
}

.com-pie {
   
    width: 100%;
    height:90%;

}
.body{
  width: 100%;
  height: 90%;
  margin-top: 5px;
}
.title{
text-align: center;color: aqua;
padding-top: 10px;
width: 100%;
  height: 10%;
  font-size: 16px;

}

</style>